<html>
<head><title>Chat</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script>
<script type="text/javascript">
$(function(){
	var conn;
	var msg = $("#msg");
	var log = $("#log");
	function appendLog(msg){
		var d = log[0];
		var doScroll = d.scrollTop == d.scrollHeight - d.clientHeight;
		msg.appendTo(log);
		if( doScroll){
			d.scrollTop = d.scrollHeight - d.clientHeight;
		}
	}
	
	$("#form").submit(function(){
		if( !conn){
			return false;
		}
		if( !msg.val()){
			return false;
		}
		conn.send(msg.val());
		msg.val("");
		return false;
	})
	
	if( window["WebSocket"]){
		conn = new WebSocket("ws://{{$}}/ws");
		conn.onclose = function(evt){
			appendLog($("<div><b>Connection closed.</b></div>"))
		}
		conn.onmessage = function(evt){
			appendLog($("<div/>").text(evt.data))
		}
	}else{
		appendLog($("<div><b>Your Browser does not support WebSocket.</b></div>"))
	}
});
</script>
<style type="text/css">
html{
	overflow:hidden;
}
body{
	overflow:hidden;
	padding:0;
	margin:0;
	width:100%;
	height:100%;
	background:gray;
}
#log{
	background:white;
	margin:0;
	padding:0.5em 0.5em 0.5em 0.5em;
	position:absolute;
	top:0.5em;
	left:0.5em;
	right:0.5em;
	bottom:0.5em;
	overflow:auto
}
#form{
	padding:0 0.5em 0 0.5em;
	margin:0;
	position:absolute;
	bottom:1em;
	left:0px;
	width:100%;
	overflow:hidden;
}
</style>
</head>
<body>
<div id="log"></div>
<form id="form">
<input type="submit" value="Send"/>
<input type="text" id="msg" size="64"/>
</form>
</body>
</html>